<template>
  <view class="container">
    <view class="detail">
      <view class="subTitle">
        <div class="subTitle_left"></div>
        <div class="subTitle_right">基本信息</div>
      </view>
      <view class="cont">
        <view class="cont_box">
          <view>时间</view>
          <view>{{ info.time || '' }}</view>
        </view>
        <view class="cont_box">
          <view>事件位置</view>
          <view>{{ info.deviceName || '' }}</view>
        </view>
        <view class="cont_box">
          <view>异常情况</view>
          <view>{{ info.description || '' }}</view>
        </view>
        <view class="cont_box">
          <view>识别类型</view>
          <view>{{ info.regionName || '' }}</view>
        </view>
        <view class="cont_box">
          <view>算法名称</view>
          <view>{{ info.skillName || '' }}</view>
        </view>
      </view>
      <view class="subTitle">
        <div class="subTitle_left"></div>
        <div class="subTitle_right">告警图片</div>
      </view>
      <view class="img">
        <image @click="preview(info.annotatedImg)" :src="info.annotatedImg" mode="aspectFit" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: {},
      }
    },
    onLoad(options) {
      if(options) {
        this.info = JSON.parse(options.details)
      }
    },
    methods: {
      preview(url) {
        uni.previewImage({
          urls: [url], // 需要预览的图片链接列表
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .detail {
    padding: 25rpx;

    .cont {
      padding: 25rpx 0;

      .cont_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        line-height: 28rpx;
        padding: 20rpx 0;
        border-bottom: 2rpx solid #e9e7e7;

        &:nth-child(1) {
          border-top: 2rpx solid #e9e7e7;
        }
      }
    }

    .img {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 25rpx 0;

      image {
        max-width: 100%;
        // height: auto;
      }
    }
  }
</style>
